<!--
 * @Description: 
 * @Author: Leequik
 * @Date: 2025-06-11 11:14:22
 * @LastEditTime: 2025-06-11 12:09:06
 * @LastEditors: Leequik
-->
<template>
    <div class="demo"> 
        <div>    
            <h5>累加为：{{sum}}</h5>
            <button @click="add">点我+1</button>
        </div>

        <hr/>
        <div>
            <img v-for="(dog,index) in dogList" :src="dog" :key="index" />
            <br/>
            <button @click="getDog">点我换一张</button>
        </div>
    </div>
    
</template>
<!---
1.
https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg
https://dog.ceo/api/breed/pembroke/images/random
 
每次返回一张图片地址
-->

<script lang="ts" setup>
import useSum from '../../hooks/useSum'
import useDog from '../../hooks/useDog'

const {sum, add} = useSum()
const {dogList, getDog} = useDog()
   

</script>

<style scoped>
    .demo {
        background-color: pink;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 10px;
        width: 550px;
        margin: 10px;
    }
    button  { 
        margin: 5px 5px;

    }
    img { 
        height: 100px;
    }

</style>